<template>
  <div class="role">
    <top-title
      title="角色管理"
      btn-text="添加角色"
      @add="handleAdd"
    />

    <n-flex class="box">
      <custom-table-filter />
      <n-data-table
        :columns="columns"
        :data="list"
        style="height: calc(100vh - 300px)"
      />
      <custom-pagination
        v-model:total="total"
        v-model:page-num="pageNum"
        v-model:page-size="pageSize"
      />
    </n-flex>
    <custom-form
      v-model:form="roleForm"
      v-model:visible="visible"
      v-model:config-list="configList"
      title="添加角色"
      @cancel="handleClose"
      @confirm="handleConfirm"
    />
  </div>
</template>

<script lang="ts" setup>
  import { h } from 'vue'
  import type { DataTableColumns } from 'naive-ui'
  import { NButton } from 'naive-ui'
  const columns = ref<DataTableColumns<Role>>([
    {
      title: '角色名称',
      key: 'name'
    },
    {
      title: '角色描述',
      key: 'remark'
    },
    {
      title: '操作',
      width: 200,
      align: 'center',
      key: 'action',
      render(row) {
        return [
          h(
            NButton,
            { type: 'primary', size: 'small', quaternary: true, onClick: () => handleEdit(row.id) },
            '编辑'
          )
        ]
      }
    }
  ])

  //  获取菜单列表
  const menuList = ref([])

  const configList = ref<FormRenderConfig[]>([
    {
      type: 'input',
      label: '角色名称',
      key: 'name',
      span: 24
    },
    {
      type: 'input',
      label: '角色描述',
      key: 'remark',
      span: 24
    },
    {
      type: 'radio',
      label: '状态',
      span: 24,
      key: 'status',
      options: [
        {
          label: '启用',
          value: 1
        },
        {
          label: '禁用',
          value: 0
        }
      ]
    },
    {
      type: 'tree',
      label: '菜单权限',
      key: 'menuIds',
      labelField: 'name',
      keyField: 'id',
      span: 24,
      options: computed(() => menuList.value)
    }
  ])

  //  是否显示角色表单
  const visible = ref(false)

  //  角色表单
  const roleForm = ref<Role>({
    name: '',
    remark: '',
    status: 1,
    menuIds: []
  })

  //  关闭表单
  function handleClose() {
    visible.value = false
    roleForm.value = {
      name: '',
      remark: '',
      status: 1,
      menuIds: []
    }
  }
  //  添加角色
  function handleAdd() {
    visible.value = true
  }
  //  编辑角色
  function handleEdit(id: number) {
    http.get('admin/role/' + id).then(res => {
      roleForm.value = res.data
      visible.value = true
    })
  }

  //  获取菜单列表
  function getMenuList() {
    http.get('admin/menu').then(res => {
      menuList.value = res.data
    })
  }

  function handleConfirm() {
    const form = Object.assign({}, roleForm.value)
    $dialog('是否确认提交？').then(() => {
      const id = roleForm.value?.id
      if (id) {
        http.put(`admin/role/${id}`, form).then(() => {
          $message.success('编辑成功')
          handleClose()
          handleQuery()
        })
      } else {
        http.post('admin/role', form).then(() => {
          $message.success('添加成功')
          handleClose()
          handleQuery()
        })
      }
    })
  }
  getMenuList()
  const { total, list, pageNum, pageSize, handleQuery } = useList({
    reqUrl: 'admin/role'
  })
  const { $dialog, $message } = useFastNaive()
</script>

<style scoped lang="scss">
  .role {
    padding: 16px;
    box-sizing: border-box;
  }
</style>
